﻿<!DOCTYPE html>
<html lang="zh-CN">
  <head>
   <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
	<title>CloudBooking API Tool</title>
    <style>
	body{
	margin:0px;
	}
    .mainLogo{
    padding: 5px;
    background-color:#319616;
    font-size: 36px;
    text-align: center;
    color: #f5f1ee;
    font-weight: 600;
    }
    h1{color:#1b7d01;}
    .mytable{width: 100%;}
    .mytable, th, td
  {
   border: 1px solid #dddddd;
   border-collapse:collapse;
   padding:5px;
   font-size:14px;
  }
  .mytable th{background-color:#f4f4f4;}
</style>
  </head>
  <body>
   <div>
    <div class="mainLogo" style="text-align:left;">
        <div>
       <div style="display:inline-block;width:68%;">CloudBooking</div> 
       <div style="display:inline-block;width:30%;text-align:right;">
         <image id="photo" style="height:100px;width:100px;"></image>
       </div>
       </div>
       <div style="padding:2px;text-align: right;">
           <span id="spusername" style="font-size:14px;color:#fff;width:200px;display: inline-block;padding-right: 20px;"></span><input type="button" id="btnLoginOut" value="login out"></input>
       </div>
    </div>
    <div id="usermanagement" v-show="false">
<p>{{ message }}</p>
     </div>
    
    
    <div id="homepage">
            <div style="margin:0px auto;width:800px;border:1px solid #ddd;border-top:0px;padding:10px 100px;background-color:#fff;padding-bottom:30px;margin-bottom:30px;">
                    <div>
                        <h1>调用API说明</h1>
                    </div>
                    <div>
                      
                        <div>
                            <h3>调用测试</h3>
                        </div>
                        <div>
                                <button value="获取用户列表" id="getuserlist">获取用户列表</button>
                                <button value="添加一个用户" id="adduser">添加一个用户</button>
                                <button value="修改一个用户信息" id="updateuser">修改一个用户信息</button>
                            </div>
                        <div>
                            ActionCode: <br /><input type="text" value="getuser" id="actionname" style="width:800px;height:30px;" />
                        </div>
                        <div>
                            MetaData: <br /> <textarea rows="10" id="MetaData" style="width:800px;">{"pageIndex":1,"pageSize":10}</textarea>
                        </div>
            
                        <div>
                            <button value="CallDataPipe" onclick="CallDataPipe()">提交</button>
                        </div>
            
                        <div>
                            <h6>返回结果</h6>
            
                        </div>
                        <div id="result" style="border:1px solid #e0dfdf;width:800px;min-height:300px;padding:10px;">
            
                        </div>
                    </div>
                   
                    <div style="margin-top:10px;">
                        <table class="mytable">
                            <tr>
                            <th>输入参数</th>
                            <td>
                                Function:必填，此项为调用API的后台方法<br />
                                MetaData:可为空，此项为调用对应方法需要的参数<br />
                            </td>
                            </tr>
                            <tr>
                                <th>返回值</th>
                                <td>
                                    {"status":"1","msg":"successfull","metadata":[]}<br />
                                    <p>
                                        metadata:返回的是json数组<br />
                                        status:结果代码1:success,0:faild<br />
                                        msg:返回信息<br />
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <th>Post调用Demo</th>
                                <td>
                                    function CallDataPipe() {<br />
                    var JsonData = {};<br />
                    JsonData.Function = $("#actionname").val();<br />
                    JsonData.MetaData = $("#MetaData").val();<br />
                    var url = ApiHref + "/api/functionRouter";<br />
                    $.post(url, JsonData, function (response) {<br />
                        console.log(response);<br />
                        var text = response;      <br />      
                        $("#result").text(text);<br />
                    },"json");<br />
                }<br />
                                </td>
                            </tr>
                        </table>
                    </div>
            
            
                    <div style="border-top:5px solid #319616; margin:20px 0px">
                        <h1>上传文件</h1>
                        <div>
                            请选择上传文件1:
                            <input type="file" id="upload1" /><br />
                            请选择上传文件2:
                            <input type="file" id="upload2" /><br /><br />
                            <input type="button" value="上传" onclick="Upload()" />
                        </div>
                        <div style="margin-top:10px;">
                            <table class="mytable">
                                <tr>
                                    <th>输入参数</th>
                                    <td>                                                       
                                        <i>请参考案例上传</i>                           
                                    </td>
                                </tr>
                                
                                 <tr>
                                <th>返回值</th>
                                <td>
                                    {"status":"1","msg":"successfull","metadata":[]}<br />
                                    <p>
                                        metadata:返回的是json数组<br />
                                        status:结果代码1:success,0:faild<br />
                                        msg:返回信息<br />
                                    </p>
                                </td>
                            </tr>
                                <tr>
                                    <th>Post调用Demo</th>
                                    <td>
                                       function Upload() {<br />
                    var url = ApiHref + "/file/upload";<br />
                    var formData = new FormData();<br />
                    formData.append("inputFile", $("#upload1")[0].files[0]);<br />
                    formData.append("inputFile", $("#upload2")[0].files[0]); <br />      
                    $.ajax({<br />
                        url: url,<br />
                        type: 'POST',<br />
                        data: formData,<br />
                        processData: false,<br />
                        contentType: false,<br />
                        dataType: "json",<br />
                        beforeSend: function () {<br />
                            console.log("正在进行，请稍候");<br />
                        },<br />
                        success: function (response) {<br />
                            if (response.ResultCode == "success") {   <br />                
                                console.log(response);<br />
                                alert("文件上传成功");<br />
                            }<br />
                            else {<br />
                                alert("上传失败");<br />
                            }<br />
                        },<br />
                        error: function (responseStr) {<br />
                            console.log("error");<br />
                        }<br />
                    });<br />
                }<br />
                                    </td>
                                </tr>
                                <tr>
                                    <th>返回结构</th>
                                    <td>
                                        {"status":"1","msg":"upload successfully."<br />
                                        ,"metadata":[{"index":0,"fileName":"792_1730115_877227_myfile_20171214d11h39m19s856.jpg"<br />
                                        ,"href":"http://www.fjyclound.cn/files/upload/792_1730115_877227_myfile_20171214d11h39m19s856.jpg"}<br />
                                        ]}                            
                                    </td>
                                </tr>
                            </table>
                        </div>
            
                    </div>
                    <div style="border-top:5px solid #319616; margin:10px 0px;">
                        <h1>删除文件</h1>
                        <div>
                            文件名称
                            <br />
                            <input type="text" id="filename"  style="width:800px;height:30px;" /><br /><br />
                            <input type="button" value="删除" onclick="fileRomove()" />
                        </div>
                        <div style="margin-top:20px;">
                            <table class="mytable">
                                <tr>
                                    <th>输入参数</th>
                                    <td>
                                        FileName:必填，文件名称<br />        
                                    </td>
                                </tr>
                                <th>返回值</th>
                                <td>
                                    {"status":"1","msg":"successfull","metadata":[]}<br />
                                    <p>
                                        metadata:返回的是json数组<br />
                                        status:结果代码1:success,0:faild<br />
                                        msg:返回信息<br />
                                    </p>
                                </td>
                                <tr>
                                    <th>Post调用Demo</th>
                                    <td>
                                       function fileRomove() {<br />
                    var url = ApiHref + "/file/deleteFile";<br />
                    var JsonData = {};      <br />
                    JsonData.filename = $("#filename").val();<br />
                    $.post(url, JsonData, function (response) {<br />
                        console.log(response);<br />
                        alert(response.ResultCode);<br />
                    }, "json");<br />
                }<br />
                                    </td>
                                </tr>
                                </table>
                        </div>
                    </div>
                </div>
    
    
    
    
    
  
  
            </div>
</div>
    
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script src="js/common.js"></script>
   <script>
    var ApiHref=""   
    function CallDataPipe() {
        var JsonData = {};
        JsonData.Function = $("#actionname").val();
        JsonData.MetaData = $("#MetaData").val();
        var url = ApiHref + "/api/functionRouter";
        $.post(url, JsonData, function (response) {
            console.log(response);
            var text =JSON.stringify(response);            
            $("#result").text(text);
        },"json");
    }


    function Upload() {
        var url = ApiHref + "/file/upload";        
        var formData = new FormData();
        formData.append("inputFile", $("#upload1")[0].files[0]);
        formData.append("inputFile", $("#upload2")[0].files[0]);       
        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            beforeSend: function () {
                console.log("正在进行，请稍候");
            },
            success: function (response) {
                if (response.status == "1") {                   
                    console.log(response);
                    alert("文件上传成功");
                }
                else {
                    alert("上传失败");
                }
            },
            error: function (responseStr) {
                console.log("error");
            }
        });
    }


    function fileRomove() {
        var url = ApiHref + "/file/deleteFile";		
        var JsonData = {};      
        JsonData.filename = $("#filename").val();
        $.post(url, JsonData, function (response) {
            if (response.status == "1"){
			  alert("remove successfull.");
			}
			else{
			  alert("remove faild.");
			}
        }, "json");
    }
</script>
<script>
    $(function(){  
        console.log(GetLocalStorageData("loginData"));   
        var userdata=JSON.parse(GetLocalStorageData("loginData"));
        $("#spusername").text("welcome, "+userdata.name);

        $("#photo").attr("src",userdata.photourl);

        $("#getuserlist").click(function(){
          $("#actionname").val("getuser");
          $("#MetaData").val('{"pageIndex":1,"pageSize":10}');
        });

         $("#adduser").click(function(){
          $("#actionname").val("adduser");
          $("#MetaData").val('{"code":"","name":"张欧川子","address":"山东省肥城市","telphone":"15194389479","birthday":"","identityID":"","weixin":"chuan00135","password":"zocz0109","photo":"zhangouchuangzi.jpg" }');
        });

         $("#updateuser").click(function(){
          $("#actionname").val("updateuser");
          $("#MetaData").val('{"code":"","name":"张欧川子","address":"山东省肥城市","telphone":"15194389479","birthday":"","identityID":"","weixin":"chuan00135","password":"zocz0109","photo":"zhangouchuangzi.jpg" }');
        });
    });
    $("#btnLoginOut").click(function(){
        var url = ApiHref + "/api/loginOut";		
        var JsonData = {};              
        $.post(url, JsonData, function (response) {
            if (response.status == "1"){
			  window.location=GetPathName()+"login";
			}
			else{
			  alert("login out faild.");
			}
        }, "json");
    });
</script>

<script>
    var vm = new Vue({
        el: '#usermanagement',
        data: {
            type: "user",
            url: "www.runoob.com",
            alexa: "10000",
            message:"hello,vue"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>
  </body>
</html>